import { motion } from 'framer-motion';
import { useLanguage } from '@/contexts/LanguageContext';

export default function Footer() {
  const { t } = useLanguage();
  
  return (
    <footer className="bg-gray-900 text-white pt-16 pb-8">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
          {/* Company Info */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
          >
            <div className="text-2xl font-bold flex items-center mb-4">
              <i className="fa-solid fa-wrench mr-2"></i>
              <span>ProHardware</span>
            </div>
            <p className="text-gray-400 mb-6">
              {t('companyDescription')}
            </p>
            <div className="flex space-x-4">
              <a href="#" className="text-gray-400 hover:text-white transition-colors" aria-label="Facebook">
                <i className="fa-brands fa-facebook"></i>
              </a>
              <a href="#" className="text-gray-400 hover:text-white transition-colors" aria-label="Twitter">
                <i className="fa-brands fa-twitter"></i>
              </a>
              <a href="#" className="text-gray-400 hover:text-white transition-colors" aria-label="Instagram">
                <i className="fa-brands fa-instagram"></i>
              </a>
              <a href="#" className="text-gray-400 hover:text-white transition-colors" aria-label="LinkedIn">
                <i className="fa-brands fa-linkedin"></i>
              </a>
            </div>
          </motion.div>
          
          {/* Quick Links */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 }}
            viewport={{ once: true }}
          >
             <h3 className="text-lg font-semibold mb-4">{t('quickLinks')}</h3>
             <ul className="space-y-2">
               <li><a href="/" className="text-gray-400 hover:text-white transition-colors">{t('home')}</a></li>
               <li><a href="/shop" className="text-gray-400 hover:text-white transition-colors">{t('shop')}</a></li>

               <li><a href="/about" className="text-gray-400 hover:text-white transition-colors">{t('about')}</a></li>
               <li><a href="/contact" className="text-gray-400 hover:text-white transition-colors">{t('contact')}</a></li>
             </ul>
          </motion.div>
          
          {/* Customer Service */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            viewport={{ once: true }}
          >
            <h3 className="text-lg font-semibold mb-4">{t('customerService')}</h3>
            <ul className="space-y-2">
              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">{t('faqs')}</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">{t('shippingPolicy')}</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">{t('returnPolicy')}</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">{t('privacyPolicy')}</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">{t('termsOfService')}</a></li>
            </ul>
          </motion.div>
          
          {/* Contact Info */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.3 }}
            viewport={{ once: true }}
          >
            <h3 className="text-lg font-semibold mb-4">{t('contactUs')}</h3>
            <ul className="space-y-3">
              <li className="flex items-start">
                <i className="fa-solid fa-map-marker-alt text-gray-400 mt-1 mr-3"></i>
                <span className="text-gray-400">123 Global Street, International City, IC 10001</span>
              </li>
              <li className="flex items-center">
                <i className="fa-solid fa-phone text-gray-400 mr-3"></i>
                <span className="text-gray-400">+1 (555) 123-4567</span>
              </li>
              <li className="flex items-center">
                <i className="fa-solid fa-envelope text-gray-400 mr-3"></i>
                <span className="text-gray-400">info@globalshop.com</span>
              </li>
            </ul>
          </motion.div>
        </div>
        
        {/* Newsletter */}
        <div className="mb-12">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
            className="bg-gray-800 rounded-xl p-6 md:p-8"
          >
            <div className="flex flex-col md:flex-row items-center justify-between gap-4">
              <div className="text-center md:text-left">
                <h3 className="text-xl font-semibold mb-1">{t('subscribeNewsletter')}</h3>
                <p className="text-gray-400">{t('getUpdates')}</p>
              </div>
              <div className="w-full md:w-auto flex">
                <input 
                  type="email" 
                  placeholder={t('newsletterPlaceholder')}
                  className="px-4 py-2 rounded-l-full w-full md:w-64 focus:outline-none text-gray-800"
                />
                <button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-r-full transition-colors">
                  {t('subscribe')}
                </button>
              </div>
            </div>
          </motion.div>
        </div>
        
        {/* Copyright */}
        <div className="pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
          <p>{t('copyright')}</p>
        </div>
      </div>
    </footer>
  );
}